<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存明细列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-col :span="4">
              <el-form-item prop="blur" label="关键词">
                <el-input v-model="queryInfo.blur" placeholder="关键词" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="warehouseInfoId" label="所属仓库">
                <el-select v-model="queryInfo.warehouseInfoId">
                  <el-option v-for="(item, index) in warehouses" :key="index" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="warehouseAreaId" label="所属库区">
                <el-select v-model="queryInfo.warehouseAreaId">
                  <el-option v-for="(item, index) in warehouseAreas" :key="index" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="warehouseLocationId" label="所属库位">
                <el-select v-model="queryInfo.warehouseLocationId">
                  <el-option v-for="(item, index) in warehouseLocations" :key="index" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table :page="page" @changePage="search">
          <template #button>
            <el-button type="primary" icon="el-icon-plus" @click="toStock('1')">入库</el-button>
            <el-button type="danger" icon="el-icon-minus" @click="toStock('2')">出库</el-button>
          </template>
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="productId" label="商品信息">
              <template #default="scope">
                {{ scope.row.productCode + '-' + scope.row.productName }}
              </template>
            </el-table-column>
            <el-table-column prop="productSpec" label="商品规格" />
            <el-table-column prop="productModel" label="商品型号" />
            <el-table-column prop="warehouseProperty" label="质量状态" align="center" width="100">
              <template #default="scope">
                {{ warehousePropertys[scope.row.warehouseProperty] }}
              </template>
            </el-table-column>
            <el-table-column prop="batchNo" label="商品批号" />
            <el-table-column prop="snNo" label="商品条码" />
            <el-table-column prop="stockQty" label="库存数量" align="right" width="100" />
            <el-table-column prop="productUnit" label="计量单位" align="center" />
            <el-table-column prop="warehouseInfoCode" label="所属仓库">
              <template #default="scope">
                {{ scope.row.warehouseInfoCode + '-' + scope.row.warehouseInfoName }}
              </template>
            </el-table-column>
            <el-table-column prop="warehouseAreaCode" label="所属库区">
              <template #default="scope">
                {{ scope.row.warehouseAreaCode + '-' + scope.row.warehouseAreaName }}
              </template>
            </el-table-column>
            <el-table-column prop="warehouseLocationCode" label="所属库位">
              <template #default="scope">
                {{ scope.row.warehouseLocationCode + '-' + scope.row.warehouseLocationName }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column prop="createName" label="创建人" width="100" />
            <el-table-column prop="createTime" label="创建时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.createTime, 'YYYY-MM-DD HH:mm')" />
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import hooks from 'src/hook/index'
import { $listDict, $moment, $hasPermission, $convertTree } from 'src/util/tools'
import { pageStockDtl } from 'src/api/wms/stockDtl'
import { listWarehouseInfo } from 'src/api/wms/warehouseInfo'
import { listWarehouseArea } from 'src/api/wms/warehouseArea'
import { listWarehouseLocation } from 'src/api/wms/warehouseLocation'
import { listProductCategory } from 'src/api/metadata/productCategory'

// 查询商品分类
const treeCategorys = ref<Array<any>>([])
listProductCategory().then(({ data }) => {
  treeCategorys.value = $convertTree(data)
})

// 查询仓库分类/属性
const warehouseCategorys = $listDict('WAREHOUSE_CATEGORY')
const warehousePropertys = $listDict('WAREHOUSE_PROPERTY')

//查询仓库/库区/库位
const warehouses = ref<Array<any>>([])
listWarehouseInfo().then(({ data }) => {
  warehouses.value = data
})
const warehouseAreas = ref<Array<any>>([])
const initWarehouseArea = (warehouseInfoId: string) => {
  listWarehouseArea({ warehouseInfoId }).then(({ data }) => {
    warehouseAreas.value = data
  })
}
const warehouseLocations = ref<Array<any>>([])
const initWarehouseLocation = (warehouseAreaId: string) => {
  listWarehouseLocation({ warehouseAreaId }).then(({ data }) => {
    warehouseLocations.value = data
  })
}

// 分页查询
const queryInfo = reactive({
  blur: '',
  warehouseInfoId: '',
  warehouseAreaId: '',
  warehouseLocationId: ''
})
const { page, initIndex, search } = hooks.useTable((pageNumber: number, pageSize: number) => {
  pageStockDtl({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
})

//监听所属仓库/库区/库位
watch(() => queryInfo.warehouseInfoId, (newVal: string) => {
  if (!newVal) {
    return
  }
  initWarehouseArea(newVal)
})
watch(() => queryInfo.warehouseAreaId, (newVal: string) => {
  if (!newVal) {
    return
  }
  initWarehouseLocation(newVal)
})

// 出入库
const router = useRouter()
const toStock = function (actionType: string) {
  router.push({
    path: '/wms/stockDtl/stockAction',
    query: { actionType }
  })
}

</script>

<style lang="scss" scoped></style>

